<template>
    <view class="bg-[#2A2A2A] text-gray-100">
        <!-- 顶部导航 -->
        <view class="bg-[#383838] px-4 py-3 flex items-center justify-center border-b border-[#4A4A4A]">
            <text class="text-lg font-semibold">编辑个人资料</text>
        </view>

        <!-- 表单区域 -->
        <view class="mt-6 bg-[#383838] mx-4 rounded-lg overflow-hidden">
            <!-- 用户名 -->
            <view class="px-4 py-3 border-b border-[#4A4A4A]">
                <text class="text-gray-400 text-sm">用户名</text>
                <input
                    v-model="formData.username"
                    class="w-full mt-1 bg-transparent text-white text-lg focus:outline-none"
                    placeholder="请输入用户名"
                    placeholder-class="text-gray-500" />
            </view>

            <!-- 邮箱 -->
            <view class="px-4 py-3 border-b border-[#4A4A4A]">
                <text class="text-gray-400 text-sm">邮箱</text>
                <input
                    v-model="formData.email"
                    class="w-full mt-1 bg-transparent text-white text-lg focus:outline-none"
                    placeholder="请输入邮箱"
                    placeholder-class="text-gray-500"
                    type="email" />
            </view>

            <!-- 头像 -->
            <view class="px-4 py-3 border-b border-[#4A4A4A]">
                <text class="text-gray-400 text-sm">头像</text>
                <input
                    v-model="formData.avatar"
                    class="w-full mt-1 bg-transparent text-white text-lg focus:outline-none"
                    placeholder="请输入头像链接"
                    placeholder-class="text-gray-500"
                    type="text" />
            </view>

            <!-- 性别 -->
            <view class="px-4 py-3 border-b border-[#4A4A4A]">
                <text class="text-gray-400 text-sm">性别</text>
                <radio-group @change="handleGenderChange" class="flex items-center space-x-2">
                    <radio label="male" value="male" :checked="formData.gender === 'male'">男</radio>
                    <radio label="female" value="female" :checked="formData.gender === 'female'">女</radio>
                    <radio label="other" value="other" :checked="formData.gender === 'other'">其他</radio>
                </radio-group>
            </view>
        </view>
        <!-- 按钮区域 -->
        <view class="mt-6">
            <button class="bg-accent text-white px-4 py-2 rounded-lg w-[80vw]" @click="handleSave">保存</button>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { updateUserinfoAPI } from "@/api";
import { useUserStore } from "@/stores/user";

const userStore = useUserStore();

const formData = ref({
    id: "1",
    username: "",
    gender: "",
    email: "",
    avatar: ""
});

formData.value = userStore.userinfo;

const handleGenderChange = (e: any) => {
    formData.value.gender = e.detail.value;
};

const handleSave = async () => {
    await updateUserinfoAPI(formData.value as any);
    userStore.userinfo = { ...userStore.userinfo, ...formData.value } as any;
    uni.showToast({
        title: "保存成功",
        icon: "success",
        duration: 1000,
        success: () => {
            uni.navigateBack();
        }
    });
};
</script>

<style>
/* 适配深色主题的输入框placeholder颜色 */
input::placeholder {
    color: #6b7280 !important;
}

/* 确保 Tailwind CSS 正常工作 */
/* 在 uni-app 项目中，你需要通过 HBuilderX 的插件市场安装 tailwind 插件 */
/* 或者手动配置 postcss 和 tailwind */
</style>
